<template>
  <div class="box2" id="movie_rank">
    <!-- <h2><a href="#"  class="more">更多</a>系统调用信息排名</h2> -->
    <div class="inner">
      <ul class="rank_list">
        <!-- <li class="top3"><em>1</em><a href="#">深圳市水务网门户</a><span>566次</span></li>
        <li class="top3"><em>2</em><a href="#">水资源监管系统</a><span>522次</span></li>
        <li class="top3"><em>3</em><a href="#">排水行业管理系统</a><span>510次</span></li>
        <li><em>4</em><a href="#">水库管理平台</a><span>467次</span></li>
        <li><em>5</em><a href="#">河湖管理系统</a><span>436次</span></li>
        <li><em>6</em><a href="#">供水行业管理系统</a><span>303次</span></li>
        <li><em>7</em><a href="#">节水行业管理系统</a><span>263次</span></li> -->
        <li v-for="(item, index) in rankData" :class="{'top3':Number(index) < 3}">
          <em>{{index+1}}</em><a href="#">{{item.clientName}}</a><span>{{item.count}}次</span>
        </li>
        <!-- <li class="top3"><em>1</em><a href="#"></a><span>566次</span></li>
        <li class="top3"><em>2</em><a href="#">水资源监管系统</a><span>522次</span></li>
        <li class="top3"><em>3</em><a href="#">排水行业管理系统</a><span>510次</span></li>
        <li><em>4</em><a href="#">水库管理平台</a><span>467次</span></li>
        <li><em>5</em><a href="#">河湖管理系统</a><span>436次</span></li>
        <li><em>6</em><a href="#">供水行业管理系统</a><span>303次</span></li>
        <li><em>7</em><a href="#">节水行业管理系统</a><span>263次</span></li> -->
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Rank',
    props: {
      
    },
    data() {
      return {
        rankData: [

        ]
      }
    },
    computed: {
    },
    methods: {
    },
    mounted() {
      
    }
  }
</script>

<style>
  .box2 ul, li { list-style:none;}
  .box2 a{ text-decoration:none; color:#3381BF;}
  .box2 a:hover{ text-decoration:underline;}

  #movie_rank { height:260px;}
  .box2 { border:1px solid #ADDFF2; text-align:left; overflow:hidden; color:#9C9C9C; text-align:left;}
  .box2 { margin-bottom:7px; margin-top: 25px;}
  .box2 h2{ background:#EEF7FE; height:21px; line-height:21px; overflow-y:hidden; border-bottom:1px solid #ADDFF2; color:#1974C8; font-size:12px; padding:0px 8px;}
  .box2 h2 a.more{ float:right; text-decoration:underline; padding-right:8px; font-weight:normal;}
  .box2 h2 span{ margin-left:5px; font-weight:normal; color:#B9B7B8;}
  .box2 .inner{ padding:8px; line-height:18px; overflow:hidden; color:#3083C7;}
  .box2 a{ color:#3083C7; white-space:nowrap; padding-left: 2%;}

  .rank_list{ line-height:20px; margin:auto; padding-top:5px; padding-left: 10px;}
  .rank_list li{ height:40px; margin-bottom:8px; width:150px; padding-left:20px; white-space:nowrap; overflow:hidden; position:relative; width:100%}
  .rank_list li.top3 em{ background:#FFE4B7; border:1px solid #FFBB8B; color:#FF6800;}
  .rank_list em{ position:absolute; left:0; top:0; width: 20px; height: 20px; border:1px solid #B1E0F4; color:#6298CC; font-style:normal; font-size: 20px; font-family:Arial; background:#E6F0FD; text-align:center; line-height: 18px; overflow:hidden;}
  .rank_list span{ position:absolute; width:60px; color:#B7B7B7; text-align:right; height:14px; background:#fff; left:110px; left: 75%;}
  #movie_rank .rank_list span{ position:absolute; width:40px; color:#B7B7B7; text-align:right; height:14px; background:#fff; left:130px;}
</style>